<template>
  <div class="region-list">
    <div class="region-header">
      快速导航：
      <span class="pointer">F</span>
    </div>
    <div class="region-navigation">F</div>
    <ul class="region-list-contain">
      <li
        class="region-list-label flex pointer"
        v-for="(item, index) in regionData"
        :key="index"
        @click="gotoQuarters(item.id, item.name)"
      >
        <span class="flex-wrap-1">{{item.name}}</span>
        <!-- <span class="flex-wrap-2">{{`${item.province}>${item.city}>${item.district}`}}</span> -->
        <span class="flex-wrap-2 gray">{{`房源数量: ${item.rentedCount}/${item.totalCount}`}}</span>
        <span class="flex-wrap-1 text-right">
          <i class="el-icon-arrow-right"></i>
        </span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "region-list",
  props: {
    value: {
      type: Number,
      default: 1,
    },
    regionData: {
      type: Array,
      default: [],
    },
    handleClick: {
      type: Function,
      default: () => {},
    },
  },
  methods: {
    gotoQuarters(id, name) {
      this.handleClick(id, name);
    },
  },
};
</script>

<style lang="scss" scoped>
.region-header {
  padding: 10px 0;
  color: #909399;
  span {
    color: #04a568;
  }
}
.region-navigation {
  padding: 10px;
  color: #333;
  background: #f5f7fa;
  border-top: 1px solid #dcdfe6;
  border-bottom: 1px solid #dcdfe6;
}
.region-list-contain {
  padding: 0;
  margin: 0;
  .region-list-label {
    font-size: 14px;
    padding: 12px 24px;
    border-bottom: 1px solid #e1e1e1;
  }
}
</style>
